<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Document</title>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../js/react-dom.development.js"
    ></script>
    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        const data = ['Angular', 'React', 'Vue']

      //1. 创建虚拟D
      const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>
                })
            }
          </ul>
        </div>
      );

      //2. 渲染虚拟DOM页面
      ReactDOM.render(VDOM, document.getElementById("test"));

      /*
        一定注意区分：【js语句（代码）】与【js表达式】
        1. 表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
            下面这些都是表达式：
                (1). a
                (2). a+b
                (3). demo(1)
                (4). arr.map()
                (5). function test () {}
        2. 语句（代码）
            下面这些都是语句（代码）：
                (1). if(){}
                (2). for(){}
                (3). switch(){case:xxx}  
      */
    </script>
  </body>
</html>
